<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible " content="IE=edge,chrome=1">
    <title>Loach Server</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <a class="navbar-brand" href="/">NutzCloud Loach</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="https://github.com/nutzam/loach" target="_blank">Github</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div id="content" class="container info">
    <div class="registered">
        <h1>Instances currently registered with Loach</h1>
        <table id='instances' class="table table-striped table-hover">
            <thead>
            <tr>
                <th>Application</th>
                <th>The number of instances</th>
                <th>Status</th>
            </tr>
            </thead>
            <tbody id="instances-tbody">
            <tr v-for="app in apps">
                <td><strong>{{ app.name }}</strong></td>
                <td>
                    {{ app.size }}
                </td>
                <td>
                    <template v-for="(instance,index) in app.ids">
                        <a :href="'/loach/v1/info/'+app.name+'/'+instance.id" target="_blank" >{{ instance.vip }}:{{ instance.port }}</a>
                        <template v-if="index < app.size - 1"> ,&nbsp;</template>
                    </template>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="general">
        <h1>General Info</h1>
        <table id='generalInfo' class="table table-striped table-hover">
            <thead>
            <tr>
                <th>Name</th>
                <th>Value</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(value, key) in status">
                <td>{{ key }}</td>
                <td>{{ value }}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script>
    $(function () {
        $.getJSON('/loach/v1/status', function (data) {
            new Vue({
                el: '#content',
                data: data
            });
        });
    });
</script>

</body>
</html>